import {Avatar, Card, Col, List, Row, Typography} from 'antd';
import React, {useEffect, useState} from 'react';
import {GridContent, PageContainer} from '@ant-design/pro-layout';
import {Link, connect} from 'umi';
import styles from './style.less';
import moment from "moment";
import {genAvatars, genTdkCrumbs, genTdkCrumbsFor404, typeUrl} from "@/utils/utils";
import {queryListSideCar} from "@/pages/home/service";
import AvatarList from "@/components/AvatarList";
import Title from "antd/lib/typography/Title";
import {previewArticle, queryArticle} from "@/pages/book/article/service";
import Comments from "@/pages/book/detail/components/Comments";
import Share from "@/components/share";

const Article = (props) => {
  const {dispatch, match, } = props;

  const [article, setArticle] = useState(undefined);
  const [listSide, setList] = useState(undefined);

  useEffect(async () => {
    const {params} = match;
    let res = !params.preview ? await queryArticle({id: params.id}) : await previewArticle({id: params.id, preview: params.preview});
    
    if (res?.data) {
      await genTdkCrumbs(res.data, dispatch, '正文', '');
      setArticle(res.data);
    }else{
      await genTdkCrumbsFor404(dispatch);
      setArticle("");
    }

    res = await queryListSideCar({
      pageName: 'all',
    });

    if (res?.data) {
      setList(res.data.rows);
    }
  }, [match.url]);

  const cardList = listSide && (
    <List
      grid={{
        gutter: 24, xs: 1, sm: 1, md: 1, lg: 1, xl: 1, xxl: 1,
      }}
      dataSource={listSide}
      renderItem={({cover, id, members, pubTitle, pubType, subTitle, createTime}, index) => (
        <List.Item key={`${id}-prod-${index}`}>
            <Card className={styles.card} hoverable onClick={() => window.open(typeUrl({pubType, id}), '_blank')}
                  cover={<img alt={pubTitle} src={cover}/>}>
              <Card.Meta
                title={<Link to={typeUrl({pubType, id})} target="_blank" rel="noopener">{pubTitle}</Link>}
              />
              <div className={styles.cardItemContent}>
                <span>{moment(createTime).fromNow()}</span>
                <div className={styles.avatarList}>
                  <AvatarList size="small">
                    {
                      genAvatars(`${id}-article-`, members)
                    }
                  </AvatarList>
                </div>
              </div>
            </Card>
        </List.Item>
      )}
    />
  );

  const titleStyle = {
    marginBottom: '8px',
    paddingBottom: '8px',
    lineHeight: '40px',
    fontSize: '28px',
    fontWeight: '500',
    borderBottom: '2px solid #f4f4f4'
  };

  const enumTags = (tags = [], ) => {
    const temp = [];
    for (let i = 0, len = tags.length; i < len; i += 1) {
      const tag = tags[i];
      if (tag)
        temp.push((<Link key={`${tag.id}-art-tag-${i}`} to={`/archives/tag/${tag.slug}`} target="_blank" rel="noopener">{i<=len-2 ? `${tag.name}, ` : `${tag.name}`}</Link>));
    }
    return temp;
  };

  const articleBody = article && (
    <Typography>
      <Title level={1} style={titleStyle}>{article.pubTitle}</Title>
      <div className={styles.pubMeta}>
        <Avatar
          key={1}
          src={article.member.avatar}
          tips={article.member.nickname}
        />{' '}
        <Link to={`/archives-author/${article.member.id}.html`} target="_blank" rel="noopener">{article.member.nickname}</Link>
        <em>{moment(article.createTime).format('YYYY-MM-DD HH:mm')}</em>
        {' '}阅读 {article.views}
      </div>
      <div className={styles.entry} dangerouslySetInnerHTML={{ __html: article.pubContent}}>
      </div>
      <Share style={styles.share} title={article.pubTitle || '无标题'} src={'@/assets/log.svg'}/>
      <div className={styles.pubMetaBottom}>
        <div className={styles.tags}>
        <span>
          tags: {article.tags && enumTags(article.tags)}
        </span>
        </div>
      </div>
      <div className={styles.pubPrevNext}>
        {article.prev && (<><strong>上一篇</strong>：<Link to={`/archives-${article.prev.id}.html`} rel="prev">{article.prev.pubTitle}</Link><br/></>)}
        {article.next && (<><strong>下一篇</strong>：<Link to={`/archives-${article.next.id}.html`} rel="next">{article.next.pubTitle}</Link></>)}
      </div>
        <div className={styles.relatedPost}>
          <h2>相关内容</h2>
          {
            article.relPubs?.length > 0 && (
              <List
                grid={{
                  gutter: 24, xs: 1, sm: 1, md: 2, lg: 2, xl: 2, xxl: 2,
                }}
                dataSource={article.relPubs}
                renderItem={(item, index) => (
                  <List.Item key={`${item.id}-rel-${index}`}>
                    <Link to={`/archives-${item.id}.html`} target="_blank" rel="noopener">
                      {item.pubTitle}
                    </Link>
                  </List.Item>
                )}
              />
            )
          }
        </div>
        <div className={styles.clearfix}/>
        <div className={styles.comment}>
          <div className={styles.clearfix}/>
          <h3>在线评论</h3>
          <Comments id={article.id}/>
        </div>
    </Typography>
);

return (
  <PageContainer title={false} breadcrumb={false}>
    <GridContent>
      <Row gutter={24}>
        <Col lg={6} md={24}>
          <Card title="热门排行推荐" className={styles.hotRec} bordered={false}
                style={{marginBottom: 24,}}>
            {cardList}
          </Card>
        </Col>
        <Col lg={18} md={24}>
          <Card className={styles.tabsCard} bordered={true}>
            {article === "" ? <p>请求的内容不存在了……</p> : articleBody}
          </Card>
        </Col>
      </Row>
    </GridContent>
  </PageContainer>
);
};

export default connect(({ user } ) => (
  {
    tdk: user.tdk,
  }
))(Article);